import React, { useState } from 'react'
import { Form, Input, Button, message, Radio } from 'antd'
import {
  UserOutlined,
  LockOutlined
} from '@ant-design/icons'
import axios from 'axios'
import './Login.less'
import { useNavigate } from 'react-router'
import base from '../routes/baseUrl'

export default function Login(props) {

  const [loginType, setLoginType] = useState('student')
  const navigate = useNavigate()

  const onFinish = value => {
    // console.log(value)
    const { username, password } = value
    axios.get(base + `/${loginType}s?username=${username}&password=${password}`).then(res => {
      if (res.data.length === 0) {
        message.error('用户名或密码错误')
      } else {
        message.success('登录成功')
        sessionStorage.setItem('token', JSON.stringify({ ...res.data[0], changePassword: username === password ? false : true }))
        // navigate('/home')
        props.setIsLogin(true)
        navigate('/', { replace: true })
      }
    }).catch(reason => {
      message.error('登录失败，请检查网络')
      console.log('网络请求错误', reason)
    })
  }

  return (
    <div style={{
      height: '100vh',
      overflow: 'hidden',
      backgroundImage: 'url("./assets/login_container_bg_01.webp")',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover'
    }}>
      <img id='logo' src="./assets/nefu_logo.webp" alt="logo" />
      <div id="login-board">
        <h1>东北林业大学</h1>
        <h1>毕设选导师系统</h1>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            modifier: 'student'
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: loginType === 'student' ? '请输入学号！' : '请输入工号！',
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={loginType === 'student' ? '学号' : '工号'}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item name='modifier' className="collection-create-form_last-form-item">
            <Radio.Group>
              <Radio value="student" style={{ color: 'white' }} onChange={(e) => { setLoginType(e.target.value) }}>我是学生</Radio>
              <Radio value="teacher" style={{ color: 'white' }} onChange={(e) => { setLoginType(e.target.value) }}>我是教师</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div style={{
        position: 'fixed',
        width: '300px',
        // height: '250px',
        background: 'rgba(9, 102, 53, 30%)',
        right: '10px',
        top: '10px',
        padding: '10px',
        color: 'white'
      }}>
        <h2 style={{color: 'white'}}>🍔&nbsp;登录信息示例&nbsp;🌴</h2>
        <p style={{margin: '0'}}>🍉&nbsp;学生用户</p>
        <ul>
          <li>用户名：2019214204</li>
          <li>密码：2019214204</li>
          <li>用户名：2019214207</li>
          <li>密码：1212</li>
        </ul>
        <p style={{margin: '0'}}>🍒&nbsp;教师用户</p>
        <ul>
          <li>用户名：1000001</li>
          <li>密码：1010</li>
        </ul>
        <h3 style={{color: 'white'}}>🍁&nbsp;更多信息请查看<a style={{color: 'white'}} href="https://gitee.com/morales/mentor-selection-system-react/blob/master/README.md" target='_blank' rel="noreferrer">Readme</a>&nbsp;🎉</h3>
      </div>
    </div>
  )
}
